CSS 背景 `background`

`background-color` 背景颜色

background-color:<color>

解释：

背景颜色，默认是 transparent，全透明

`background-image` 背景图片

background-image:<bg-image>[,<bg-image>]* > <bg-image> = <image>|none

解释：

image 的引入方法（引号改成单引号或者不加引号都可以）：
- 绝对地址：url("绝对地址")
- 相对地址：url("/image/x.png")
- 相对地址 2：url("../image/x.png") （..表示向上一级）
可以写多个图片，先写的覆盖后写的。background-image:url(red.png), url(blue.png)
background-image的优先级高于background-color，也就是background-color铺在后面：

div {
    width: 250px;
    height: 250px;
    background-image: url(...);
    background-color: lightblue;
    background-repeat: no-repeat; /*之后会讲*/
    background-position: 50% 50%; /*之后会讲*/
}

`background-repeat` 背景图片延伸方式

background-repeat: <repeat-style>[,<repeat-style>]* > <repeat-style> = repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2}

解释：

设置背景图片以何种方式填满这个元素。默认是repeat。
这之前必须要设置background-image
可以提供 1 对或多对参数，中间用逗号隔开，每对参数包含 2 个或 1 个参数。
多对参数的意义在于，当设置多张background-image时，为它们一一设置（这一点同样适用于后面的各个background-image相关的属性）

div {
    width: 250px;
    height: 250px;
    background-image: url("https://jackie-image.oss-cn-hangzhou.aliyuncs.com/public/16-11-29/16656082.jpg"),
        url("https://jackie-image.oss-cn-hangzhou.aliyuncs.com/avatar.png");
    background-repeat: no-repeat, repeat;
    background-position: 50% 50%; /*之后会讲*/
}

提供 2 个参数时，第一个参数用于横向，第二个参数用于纵向。
如果只提供一个参数，则横向纵向都使用。特殊值repeat-x,repeat-y只能设置它们所对应的轴。
下面看一下repeat, space, round, no-repeat的效果:
repeat

space

round

no-repeat
</div>
- repeat:默认值，表示不进行缩放，图片不断重复
- space:表示不缩放，完全填满整个元素，中间可以有间隙
- round:表示用最小程度的缩放，完全填满整个元素，中间没有任何间隙
- no-repeat:表示不重复

`background-attachment` 背景固定

background-attachment:<attachment> [, <attachment>]* > <attachment> = scroll|fixed|local

解释：

用来设置背景图片是否相对固定的方式。默认是scroll。
必须先指定background-image.
来观察一下效果：
scroll
</div>
fixed
</div>
local
</div></div>

scroll：背景图像相对于元素固定

fixed：背景图像相对于窗体固定

local：背景图像相对于元素内容（子元素）固定，CSS3新增的属性

`background-position` 背景图片位置

background-position：<position> [, <position>]* > <position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

解释：

用来设置背景图片相对的位置
一般只写两个值，比如：background-position:20px 50px;指的是：
- 以 top 上边界为基础向下偏移 20px，以 left 左边界为基础向右偏移 50px。
再比如：background-position:20% 50%;指的是：
- ab 之间占了整体的 20% - ef 之间占了背景图片的 20% - ad 之间占了整体的 50% - cf 之间占了背景图片的 50% - 也就是说，背景图片20% 50%的位置和元素20% 50%的位置重叠在一起。
注意：在background-position里面，<length>和<persentage>的偏移基准是不一样的，<length>是纯粹的偏移，而<percentage>有点“对齐”的意思。
在CSS3，这个属性可以写三个或四个值了。可以写成：方向+偏移量+方向+偏移量，或者方向+偏移量+方向；就是说，写偏移量之前，一定要声明方向。举例吧：
- 三个参数：background-position:right 20px bottom;指的是：以右边界为基础向左偏移 20px，并和下边界对齐：
- 四个参数：background-position:right 20% bottom 50%;，具体效果见下面：
- 再强调一遍，写偏移量（<length>或者<percentage>）之前，一定要声明方向。写成right 20px 50px或者30% bottom 20%是没用的。

`background-origin` 背景图片相对定位方式

background-origin: <box>[, <box>]* > <box> = border-box | padding-box | content-box

解释：

设置偏移的基准是哪一个边框。默认是padding-box
用例子来说明：

div {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 25px;
    background-color: #bbb;
    background-image: url(https://jackie-image.oss-cn-hangzhou.aliyuncs.com/avatar.png);
    background-repeat: no-repeat;
    padding: 25px;
    border: 25px solid rgba(0, 0, 0, 0.3);
}
.border-box {
    background-origin: border-box;
}
.padding-box {
    background-origin: padding-box;
}
.content-box {
    background-origin: content-box;
}

`background-clip` 背景图片/颜色覆盖范围

background-clip: <box>[, <box>]* > <box> = border-box | padding-box | content-box

解释：

用来设置，背景图片覆盖到的范围。默认是border-box。
background-clip对background-color也同样有效。也就是说，背景颜色的覆盖范围也和它有关。
border-box:背景图片除了没法覆盖margin以外，都能覆盖到
padding-box:背景图片只能覆盖到border以内（不包含border）
content-box:背景图片只能覆盖到padding以内（不包含padding）
以下从左往右，分别是border-box，padding-box，content-box。

div {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 25px;
    background-image: url(https://jackie-image.oss-cn-hangzhou.aliyuncs.com/avatar.png);
    padding: 25px;
    border: 25px solid rgba(0, 0, 0, 0.3);
}
.border-box {
    background-clip: border-box;
}
.padding-box {
    background-clip: padding-box;
}
.content-box {
    background-clip: content-box;
}

`background-size` 背景图片大小

background-size:<bg-size> [, <bg-size>]* > <bg-size> = [<length>|<percentage>|auto]{1, 2}|cover|contain

解释：

用来定义背景图片大小，默认是auto，表示无缩放地展示背景图片。
<length>：不言而喻，就是直接定义长宽
<percentage>：相对于背景图片的容器的百分比（注意不是相对于原图，而是以容器本身为基准）
cover：背景图片的长宽都超过容器，但尽可能小。也就是等比例缩放到刚好能完全覆盖整个元素。
contain：图片的长宽都不超过容器，但尽可能大。也就是等比例缩放到刚好能完全撑满整个元素。

`linear-gradient()` 线性渐变

linear-gradient([[<angle>|to <side-or-center>],]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom] > <color-stop> = <color>[<percentage> | <length>]?

解释：

linear-gradient是用来定义线性渐变的背景图片的，一般用法像这样：background-image:linear-gradient(red, bule);表示红蓝渐变，效果如下(当然我改了颜色值，不然略微有点丑）：
第一个参数[<angle>|to <side-or-center>]是可选的，可以写一个角度，表示渐变的方向（默认是180deg，表示从上往下）；也可以用关键词的方式，来定义从左往右（to right）或者从右往左(to left)或者从上往下（to bottom，默认）以及从下往上（to top）
第二个参数是必须的，而且必须写两个及以上，用来表示颜色渐变。第二个参数，不光指定渐变的颜色，还能指定颜色停止的位置。比如：background-image:linear-gradient(gold, pink 70%, purple);指定粉色在渐变 70%的位置结束。在下面举了例子，在此不再深究。

`radial-gradient()` 径向渐变

这是一个大坑，详细讲的话要讲很久，只举几个例子，详细的请看这里：CSS 参考手册。

background-image:radial-gradient(gold, pink);省略了默认值，补充完整是radial-gradient(ellipse, farthest-corner, gold, pink)
background-image:radial-gradient(closest-side, gold, pink);
background-image:radial-gradient(circle, gold, pink); 默认是farthest-corner，也就是扩散到远端。
background-image:radial-gradient(circle 50px, gold, pink);
background-image:radial-gradient(100px 50px, gold, pink);
background-image:radial-gradient(100px 50px at 0 0, gold, pink);
background-image:radial-gradient(gold, pink 20%, mediumvioletred);

`repeating-*-gradient()` 循环渐变

*可以替换成linear或radial，表示渐变不断地循环

`backgound` 缩写

background: [<bg-layer> ,]* <final-bg-layer> > <bg-layer> = <bg-image> || <position> [/ <bg-size>]? || <repeat-style> || <attachment> || <box> || <box> > <final-bg-layer> = <bg-layer> || <’backgorund-color’>

CSS 背景 background

background-color 背景颜色

background-image 背景图片

background-repeat 背景图片延伸方式

background-attachment 背景固定

background-position 背景图片位置

background-origin 背景图片相对定位方式

background-clip 背景图片/颜色覆盖范围

background-size 背景图片大小

linear-gradient() 线性渐变

radial-gradient() 径向渐变

repeating-*-gradient() 循环渐变

backgound 缩写

CSS 背景 `background`

`background-color` 背景颜色

`background-image` 背景图片

`background-repeat` 背景图片延伸方式

`background-attachment` 背景固定

`background-position` 背景图片位置

`background-origin` 背景图片相对定位方式

`background-clip` 背景图片/颜色覆盖范围

`background-size` 背景图片大小

`linear-gradient()` 线性渐变

`radial-gradient()` 径向渐变

`repeating-*-gradient()` 循环渐变

`backgound` 缩写